<template>
    <div class="side-menu" :class="{ 'collapsed': collapsed }">
      <div class="menu-header">
        <Avatar image="/images/logo.png" class="mr-2" size="large" />
        <h2 v-if="!collapsed">Smart Story</h2>
      </div>
  
      <div class="menu-items">
        <div v-for="item in menuItems" :key="item.id" class="menu-item">
          <i :class="item.icon"></i>
          <span v-if="!collapsed">{{ item.label }}</span>
        </div>
      </div>

      <div style="cursor: pointer;position: fixed;bottom: 30px;left: 30px;" @click="$emit('toggle-menu')">
        <i  class="pi" :class="collapsed ? 'pi-angle-double-right' : 'pi-angle-double-left'"></i>
      </div>
    </div>
  </template>
  
  <script setup>
  import Avatar from 'primevue/avatar'
  
  defineProps({
    collapsed: {
      type: Boolean,
      default: false
    }
  })
  
  defineEmits(['toggle-menu'])
  
  const menuItems = [
    { id: 1, label: 'Dashboard', icon: 'pi pi-home' },
    { id: 2, label: 'Charts', icon: 'pi pi-chart-bar' },
    { id: 3, label: 'Components', icon: 'pi pi-box' },
    { id: 4, label: 'Settings', icon: 'pi pi-cog' }
  ]
  </script>
  
  <style scoped>
  .side-menu {
    background: #f0efe7;
    height: calc(100vh - 2rem);
    border-radius: 1rem;
    border: 1px solid #e0e0e0;
    padding: 1rem;
    transition: all 0.3s ease;
  }
  
  .menu-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .toggle-button {
    position: relative;
  }
  
  .toggle-button i {
    margin-left: 0.5rem;
  }
  
  .menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
  }
  
  .menu-item:hover {
    background: #f5f5f5;
  }
  
  .side-menu.collapsed {
    width: 75px;
  }
  
  .side-menu.collapsed .menu-item {
    justify-content: center;
  }
  
  .side-menu.collapsed .menu-item span {
    display: none;
  }
  </style>